<template>
  <div class="project-dialog">
    <el-dialog :title="formData.type == 'add' ? '创建作战任务' : '编辑作战任务'" :visible="dialogFormVisible" @close="closeDialog"
      show-close width="30%">
      <div class="dialog-content">
        <el-form :model="formData" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="项目名称" prop="name" :rules="[
            {
              required: true,
              message: '请输入作战任务名称',
              trigger: 'blur',
            },
          ]">
            <el-input v-model.number="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="任务类型" prop="taskType" label-width="100px" :rules="[
            {
              required: true,
              message: '请选择任务类型',
              trigger: 'change',
            },
          ]">
            <el-select v-model="formData.taskType" placeholder="请选择">
              <el-option v-for="item in taskTypeList" :key="item.value" :label="item.label" :value="item.value" :title="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelProject">取 消</el-button>
        <el-button type="primary" @click="sureProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { SaveTask, EditTask } from "../../../api/project";
export default {
  props: {
    projectDialog: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: () => { },
    },
  },
  watch: {
    projectDialog() {
      this.dialogFormVisible = this.projectDialog;
    },
    form() {
      this.formData = this.form;
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      title: "创建作战任务",
      formData: {
        type: "",
        id: "",
        name: "",
      },
      taskTypeList: [
        {
          label: "侦察",
          value: 0
        },
        {
          label: "干扰",
          value: 1
        },
        {
          label: "打击",
          value: 2
        },
        {
          label: "发现",
          value: 3
        },
        {
          label: "跟踪",
          value: 4
        },
        {
          label: "定位",
          value: 5
        },
        {
          label: "评估",
          value: 6
        }
      ]
    };
  },
  methods: {
    cancelProject() {
      this.dialogFormVisible = false;
    },
    sureProject() {
      let userinfo = JSON.parse(localStorage.getItem("userInfo"));
      this.$refs.numberValidateForm.validate((valid) => {
        if (valid) {
          if (this.formData.type == "add") {
            const list = {
              taskName: this.formData.name,
              userName: userinfo?.username,
              taskType: this.formData.taskType,
            };
            SaveTask(list)
              .then((res) => {
                const { code, msg } = res?.data;
                if (code == 200) {
                  this.$message.success(msg);
                  this.dialogFormVisible = false;
                  this.$emit("changeoperate");
                } else {
                  this.$message.error(msg);
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          } else {
            const list = {
              taskId: this.formData.id,
              taskName: this.formData.name,
              taskType: this.formData.taskType,
            };
            EditTask(list)
              .then((res) => {
                const { code, msg } = res?.data;
                if (code == 200) {
                  this.$message.success(msg);
                  this.dialogFormVisible = false;
                  this.$emit("changeoperate");
                } else {
                  this.$message.error(msg);
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          }
        }
      });
    },
    closeDialog() {
      this.$emit("closeDialog");
      this.$refs.numberValidateForm.clearValidate();
    },
  },
};
</script>
<style lang="scss">
.project-dialog {
  .dialog-footer {
    text-align: center;
  }

  .el-button {
    width: 120px;
  }
}
</style>
